<template>
  <div>
    <van-sticky :offset-top="1">
      <form action="/">
        <van-search
          v-model="keyword"
          shape="round"
          :autofocus="true"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="back"
          @input="fnGetList"
          @focus="fnScroll"
          background="var(--pink)"
        />
      </form>
    </van-sticky>
    <div
      class="search_history aui-padded-15 aui-bg-f"
      v-if="!search.is_show && !sy_data.is_show && search.history.length > 0"
      v-cloak
    >
      <van-row class="aui-text-3 aui-font-weight aui-ftn15">
        <van-col span="18">
          历史搜索
        </van-col>
        <van-col span="6" class="aui-text-right" @click="fnClearHistory">
          <i class="iconfont icon-lajitong aui-ftn13 aui-text-9"></i>
        </van-col>
      </van-row>
      <div class="aui-padded-t-15">
        <div
          class="aui-label tag-list aui-margin-b-10 aui-margin-r-5 van-ellipsis"
          @click="fnSetSearch(item)"
          v-for="(item, index) in search.history"
          :key="index"
          v-text="item"
        ></div>
      </div>
    </div>
    <div
      class="search_list aui-bg-f"
      v-if="search.is_show && !sy_data.is_show && search.list.length > 0"
      v-cloak
    >
      <ul class="aui-list aui-list-in">
        <li
          class="aui-list-item aui-list-item-middle van-hairline--bottom"
          @click="fnSetSearch(item.name)"
          v-for="(item, index) in search.list"
          :key="index"
        >
          <div class="aui-list-item-inner aui-list-item-arrow">
            <div
              class="aui-list-item-title aui-text-3 aui-ftn14 aui-padded-l-5 aui-padded-r-5 aui-padded-t-10 aui-padded-b-10 van-ellipsis"
              v-text="item.name"
            ></div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="!search.is_show && sy_data.is_show" v-cloak>
      <div
        v-if="sy_data.isTotal && sy_data.items.length == 0 && sy_data.page == 1"
        v-cloak
      >
        <div class="no-data aui-text-center aui-text-9">
          <i class="iconfont icon-lujing1161"></i>
          <div class="aui-ftn16">
            空空如也~
          </div>
        </div>
      </div>
      <section
        class="sy_list aui-padded-t-5 aui-padded-b-5 aui-padded-l-10 aui-padded-r-10"
        v-if="!search.is_show && sy_data.is_show"
        v-cloak
      >
        <van-pull-refresh
          v-model="sy_data.refreshing"
          @refresh="fnLoadMore"
          :disabled="disabled"
        >
          <van-list
            v-model="sy_data.loading"
            :finished="sy_data.finished"
            :finished-text="text"
            @load="fnGetSearchData"
          >
            <van-row
              class="list aui-padded-10 aui-margin-b-5 aui-bg-f"
              v-for="(item, index) in sy_data.items"
              :key="index"
              @click="fnOpenDetail(item.id, item.type)"
            >
              <van-col span="6">
                <div
                  class="good-img"
                  :style="{ backgroundImage: 'url(' + item.image + ')' }"
                  v-lazy="item.image"
                >
                  <div class="tag-group">
                    <div class="all-red aui-margin-b-5" v-if="item.all_red > 0">
                      <i class="iconfont icon-zijin"></i>
                      <span>+{{ item.all_red }}</span>
                    </div>
                    <div class="all-red aui-margin-b-5 aui-ftn12" v-if="item.is_sd">
                      <span>商</span>
                    </div>
                    <div
                      class="is-zhui"
                      v-if="item.is_zhui == 1"
                      :style="{ top: item.all_red > 0 ? '20px' : '0px' }"
                    >
                      <i class="iconfont icon-zhuiping"></i>
                      <span class="aui-ftn12">追评</span>
                    </div>
                  </div>
                </div>
              </van-col>
              <van-col span="12">
                <div class="cont aui-padded-l-10">
                  <div
                    class="name van-ellipsis aui-ftn14 aui-text-3"
                    v-text="item.name"
                  ></div>
                  <div class="tag aui-ftn12">
                    下单{{ item.price }}元 返<span
                      class="aui-text-red"
                      v-text="item.back_price"
                    ></span
                    >元
                  </div>
                  <div class="other aui-ftn12">
                    剩 {{ item.exitnum }}/{{ item.num }}份
                  </div>
                </div>
              </van-col>
              <van-col span="6" class="rt aui-text-right">
                <i
                  class="iconfont icon-shandian aui-ftn10 aui-text-center"
                  :class="{ no_sk: item.puttype == 1, sk: item.puttype != 1 }"
                  v-cloak
                ></i>
                <div>
                  <button
                    class="aui-ftn12 aui-text-f aui-text-center"
                    v-bind:class="{ sy: !item.exittime && item.exitnum > 0 }"
                    v-if="!item.exittime && item.exitnum > 0"
                    v-cloak
                  >
                    抢试用
                  </button>
                  <button
                    class="aui-ftn12 aui-text-f aui-text-center"
                    v-bind:class="{ finished: !item.exittime && !item.exitnum }"
                    v-else-if="!item.exittime && !item.exitnum"
                    v-cloak
                  >
                    已抢完
                  </button>
                  <button
                    class="aui-ftn12 aui-text-f aui-text-center"
                    v-bind:class="{ countdown: item.exittime }"
                    v-else-if="item.exittime"
                    v-cloak
                  >
                    <van-count-down
                      :time="item.exittime * 1000"
                      format="HH 时 mm 分 ss 秒"
                      @finish="item.exittime = 0"
                    />
                  </button>
                </div>
              </van-col>
            </van-row>
          </van-list>
        </van-pull-refresh>
      </section>
    </div>
  </div>
</template>

<script>
import Search from "../../service/search.js";
export default {
  data() {
    return {
      keyword: "",
      title: "",
      cur: 0,
      text: "",
      is_return: false,
      search: {
        list: [],
        is_show: false,
        isLoading: false,
        history: [],
      },
      sy_data: {
        isTotal: false,
        loading: false,
        finished: false,
        refreshing: false,
        is_show: false,
        search: "",
        page: 0,
        limit: 10,
        items: [],
      },
      disabled: false,
    };
  },
  mounted() {
    this.init();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    fnScroll() {
      window.scrollTo(0, 0);
    },
    init: function() {
      this.search.history = this.$store.state.search_history
        ? this.$store.state.search_history
        : [];
    },
    // 存搜索记录
    fnSaveHistoryData: function(search) {
      var index = this.search.history.indexOf(search);
      if (index == -1) {
        this.search.history.push(search);
        this.$store.commit("ADD_SEARCH", this.search.history);
      }
    },
    fnClearHistory: function() {
      this.$dialog
        .confirm({
          message: "确认删除全部历史纪录",
        })
        .then(() => {
          this.search.history = [];
          this.$store.commit("REMOVE_SEARCH", this.search.history);
        })
        .catch(() => {
          // on cancel
        });
    },
    onSearch: function(val) {
      this.fnSearchData(val);
    },
    // list tag
    fnGetList: function(search) {
      this.search.is_show = search ? true : false;
      this.sy_data.is_show = false;
      this.search.list = [];
      this.fnGetListData(search);
    },
    fnGetListData: function(search) {
      if (!this.search.isLoading) {
        this.search.isLoading = true;
        Search.fnGetkeywordList({ keyword: search }).then((res) => {
          this.search.isLoading = false;
          if (res) {
            if (res.status) {
              this.search.list = res.data;
            }
          }
        });
      }
    },
    // 指定搜索
    fnSetSearch: function(search) {
      this.keyword = search;
      this.fnSearchData(search);
    },
    // 去搜索
    fnSearchData: function(search) {
      this.sy_data = {
        isTotal: false,
        loading: false,
        finished: false,
        refreshing: false,
        is_show: false,
        search: search,
        page: 0,
        limit: 10,
        items: [],
      };
      this.sy_data.is_show = true;
      this.search.is_show = false;
      this.fnGetSearchData();
    },
    // 获取数据
    fnGetSearchData: function() {
      if (this.sy_data.is_show && !this.search.is_show) {
        if (this.sy_data.loading && !this.sy_data.finished) {
          this.sy_data.page++;
          Search.fnGetDataList({
            keyword: this.sy_data.search,
            p: this.sy_data.page,
            n: this.sy_data.limit,
            isLoading: true,
          }).then((res) => {
            // 加载状态结束
            this.sy_data.loading = false;
            if (res) {
              if (res.status) {
                this.fnSaveHistoryData(this.sy_data.search);
                this.sy_data.items = this.sy_data.items.concat(res.data);
              } else {
                this.sy_data.finished = true;
                if (this.sy_data.page == 1) {
                  this.sy_data.isTotal = true;
                  this.text = "";
                } else {
                  if (this.sy_data.items.length > 0) this.text = "没有更多了";
                }
              }
            }
          });
        }
      }
    },
    fnLoadMore() {
      // 清空列表数据
      this.sy_data.refreshing = true;
      this.sy_data.finished = false;
      this.sy_data.items = [];
      this.text = "";
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.sy_data.loading = true;
      this.fnSearchData(this.keyword);
    },
    fnOpenDetail: function(id) {
      this.utils.fnOpenCommon(this, { name: "product", params: { id: id } });
    },
  },
};
</script>

<style scoped="">
.van-search__action {
  color: #fff !important;
}
section.sy_list div.list {
  position: relative;
  border-radius: 4px;
}
section.sy_list div.list .good-img {
  position: relative;
}

section.sy_list div.list .good-img .tag-group {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 88;
  display: flex;
  flex-direction: column;
}
section.sy_list div.list .good-img .all-red,
section.sy_list div.list .good-img .is-zhui {
  background-color: rgba(247, 57, 87, .7);
  border-radius: 0 0 0 10px;
  color: #fff;
  padding: 0 2px 0 3px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


section.sy_list div.list .good-img .all-red span,
section.sy_list div.list .good-img .is-zhui span {
  font-size: 12px;
  padding-left: 2px;
}
section.sy_list div.list div.cont {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
section.sy_list div.list div.cont div.name {
  padding-bottom: 20px;
}

section.sy_list div.list div.cont div.tag {
  padding-bottom: 5px;
}
section.sy_list div.list div.cont div.tag,
section.sy_list div.list div.cont div.other {
  color: #aaa;
}

section.sy_list div.list div.rt {
  height: 84px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

section.sy_list div.list div.rt i {
  width: 27px;
  height: 27px;
  line-height: 27px;
  display: inline-block;
  background-color: rgba(247, 57, 87, 0.1);
  border-radius: 50%;
}
section.sy_list div.list div.rt i.sk {
  background-color: rgba(247, 57, 87, 0);
  opacity: 0;
}

section.sy_list div.list div.rt i.no_sk {
  background-color: rgba(247, 57, 87, 0.1);
  color: var(--pink);
}

section.sy_list div.list div.rt button {
  border: 0;
}

section.sy_list div.list div.rt button.countdown {
  background-color: #e5e5e5;
}
section.sy_list div.list div.rt button.finished {
  background-color: #a9a9a9;
}
section.sy_list div.list div.rt button.sy {
  background-color: var(--pink);
}
div.tag-list {
  background-color: #f5f5f5;
  padding: 5px 10px;
  border-radius: 10px;
  display: inline-block !important;
  max-width: 60%;
}
</style>
